<template>
  <div id="qrcode">  

    <el-row>
       <el-col :span="12" >  
                 <div style="height:38px;line-height:38px;width:150px;"> 
                  <i class="el-icon-back" @click="goBack"></i> 
                  {{ $route.query.name }} 
                </div> 
            </el-col>
        <el-col :span="12" style="text-align: right;">         
            <el-button type="primary" class="custom_color_button" style="margin-bottom:10px;" @click="add_but">添加二维码</el-button>         
        </el-col>
  </el-row>

   <!-- 渲染数据list -->
   <qrcode-list :qrdata="qrdata" @up_list_fun="list_fun"> </qrcode-list>

      
     <!-- 承接二维码 -->
    <el-dialog title="承接二维码" :visible.sync="add_mtk"  width="600px">
        <div style="width:100%;"> 


        <el-form ref="form"   label-width="60px" style="width:100%;">
    
             <el-form-item label="标题">
                    <el-input    v-model="mtk_form.title" placeholder="标题"></el-input>
              </el-form-item> 
              <el-form-item label="手机号">
                    <el-input    v-model="mtk_form.telphone" placeholder="手机号"></el-input>
              </el-form-item> 
              <el-form-item label="姓名">
                    <el-input    v-model="mtk_form.username" placeholder="姓名"></el-input>
              </el-form-item>

              <el-row style="width:100%;">
                     <el-col :span="12">
                        <el-form-item label="头像">
                            <el-upload 
                                  action="uploadUrl"  
                                  :show-file-list="false"   
                                  :before-upload="beforeupload2"
                                  :http-request="ImgUploadSectionFile">
                                  <div class="avatar-uploader">
                                      <img v-if="pic_form2.head_img"  :src="pic_form2.head_img" class="avatar">
                                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                  </div>
                            </el-upload>
                         </el-form-item>       
                     </el-col>
                    </el-row>

               <el-row style="width:100%;">
                     <el-col :span="12">
                        <el-form-item label="微信">
                            <el-upload 
                                  action="uploadUrl"  
                                  :show-file-list="false"   
                                  :before-upload="beforeupload"
                                  :http-request="ImgUploadSectionFile">
                                  <div class="avatar-uploader">
                                      <img v-if="pic_form.head_img"  :src="pic_form.head_img" class="avatar">
                                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                  </div>
                            </el-upload>
                         </el-form-item>       
                     </el-col>
                      <el-col :span="12">
                            <el-form-item label="支付宝">
                              <el-upload 
                                    action="uploadUrl"  
                                    :show-file-list="false"   
                                    :before-upload="beforeupload1"
                                    :http-request="ImgUploadSectionFile">
                                    <div class="avatar-uploader">
                                        <img v-if="pic_form1.head_img"  :src="pic_form1.head_img" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </div>
                              </el-upload>
                            </el-form-item>                         
                      </el-col>
                    </el-row>                            
        </el-form>

            <div style="text-align: center;width:50%;margin:auto;">
                <el-button type="primary" class="custom_color_button" style="width:80%;" @click="add_but_qr">确认</el-button>
            </div>

        </div> 
    </el-dialog>



      <el-dialog title="用户验证" :visible.sync="user_test.user_mtk"  width="400px" >
          <el-form ref="form" :model="user_test"  label-width="100px" style="width:100%;">
                <el-form-item label="" label-width="0px">
                    <el-input v-model="user_test.password" placeholder="二级密码" ></el-input>
                </el-form-item>
                <el-form-item label="" label-width="0px" >
                    <div style="display:flex;">
                        <el-input v-model="user_test.phone" placeholder="手机验证码" style="flex:1;"></el-input>
                         <el-button class="code_but1 custom_color_button" type="primary"  @click="getCode_yz()" :disabled="user_test.disabled" style="margin-left:10px;">
                          {{ user_test.codeText }}
                        </el-button>
                    </div>
                </el-form-item>
                <div style="text-align: center;width:50%;margin:auto;margin-top:20px;">
                  <el-button type="primary" class="custom_color_button" style="width:100%;" @click="user_mtk_but">确认</el-button>
                </div>
         </el-form>
   </el-dialog>

   

    




      
  </div>
</template>

<script>
import QrcodeList from '@/view/Guomi/QrcodeList'
export default {
  name: 'qrcode',
  data () {
    return {
        qrdata:[],
        add_mtk:false,
        mtk_form:{
            title:'',
            telphone:'',
            username:'',
        },
         pic_form:{
           head_img:'',
           upfile:'',
        },
        pic_form1:{
           head_img:'',
           upfile:'',
        },
         pic_form2:{
           head_img:'',
           upfile:'',
        },
         user_test:{  //用户判定
            user_mtk:false, //用户判定模态狂
            codeText:'获取验证码', //获取验证码字
            totalTime:60,  //获取验证码秒
            disabled:false, //禁用获取验证码
            password:'', //二级密码
            phone:'',  //验证码
        },
    }
  },
 components:{
    QrcodeList
  },
  created(){

       this.list_fun()
  },
  mounted (){
    
  },
  methods: {
  
    list_fun(){
       this.post("/buy_kmb/qrList", {
              page:this.page,
	        }).then(res => {

            this.qrdata = res.result
            //console.log(res,"aaa")

            for(let a of this.qrdata) {
                      
                    a.srcListwx = a.collection_picture
                    a.srcListwxarr = [this.urlimg + a.collection_picture]
                
                    a.srcListzfb = a.zfb_collection_picture
                    a.srcListzfbarr = [this.urlimg + a.zfb_collection_picture]
                       
           }

         })
      

    },
    add_but(){
         this.add_mtk = true
    },
    add_but_qr(){
          this.user_test.user_mtk = true
          
    },
    user_mtk_but(){

        this.getCode_yz_qr().then(res => {
            console.log(res)
            if(res == 1){
                this.qr_fun()
            }
        })
  
    },
    qr_fun(){
         this.post("/buy_kmb/addQr", {
                   weixin:this.pic_form.upfile,
                   ali:this.pic_form1.upfile,
                   title:this.mtk_form.title,
                   telphone:this.mtk_form.telphone,
                   icon:this.pic_form2.upfile,
                   username:this.mtk_form.username,
                }).then(res => {

                    if(res.error_code == 0){
                        this.open1(res.result,'success')  //提示框
                        this.list_fun()
                        this.add_mtk = false
                        this.mtk_form={
                            title:'',
                            telphone:'',
                            username:'',
                        }
                        this.pic_form={
                            head_img:'',
                            upfile:'',
                        },
                        this.pic_form1={
                            head_img:'',
                            upfile:'',
                        }
                        this.pic_form2={
                            head_img:'',
                            upfile:'',
                        }
                    }else {
                     this.open1(res.message,'warning')
                    }

              })
    },
    beforeupload(file){   //重新写入上穿 需要点击确认上传与表单一起提交
           if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }  
            var windowURL = window.URL || window.webkitURL;               
            this.pic_form.head_img=windowURL.createObjectURL(file);             
            
            this.upimgpost("/image/uploadMultiple",file).then(res => {
              console.log(res.result.url )
               this.pic_form.upfile = res.result.url    
            })

            return false;
     },
     beforeupload1(file){
            if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }  
            var windowURL = window.URL || window.webkitURL;               
            this.pic_form1.head_img=windowURL.createObjectURL(file);             
            
            this.upimgpost("/image/uploadMultiple",file).then(res => {
              console.log(res.result.url )
               this.pic_form1.upfile = res.result.url    
            })

            return false;
     },
      beforeupload2(file){
            if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }  
            var windowURL = window.URL || window.webkitURL;               
            this.pic_form2.head_img=windowURL.createObjectURL(file);             
            
            this.upimgpost("/image/uploadMultiple",file).then(res => {
              console.log(res.result.url )
               this.pic_form2.upfile = res.result.url    
            })

            return false;
     },
     ImgUploadSectionFile(param){//图片上传    
      },
     goBack() {
        this.$router.go(-1)
    },
    
  }
}
</script>


<style scoped>
.avatar-uploader  {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
</style>
